<template>
        <div class="datacard">
          数据统计
          <div class="dcard_inner">
            <div class="di_left">
              房间总数：<i>{{ counts.houses}}</i> 居民总数：<i>{{ counts.users }}</i>商店总数：<i>{{ counts.stores }}</i>
            </div>
            <div class="di_right">报修总数：<i>{{ counts.repairs }}</i>投诉总数：<i>{{ counts.questions }}</i></div>
          </div>
        </div>
        
        <div class="datacard">
          今日数据变动
          <div class="dcard_inner two">
            <div class="di_list">新增维修 <i>{{ counts.todayRepairs }}</i> 处</div>
            <div class="di_list">未处理报修 <i>{{ counts.notFinishedRepairs }}</i> 处</div>
            <div class="di_list">新增投诉 <i>{{ counts.todayQuestions }}</i> 处</div>
            <div>未处理投诉 <i>{{ counts.notAnswer }}</i> 处</div>
          </div>
        </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive,onMounted } from "vue";
  import { getcounts } from "../service/homeindex/datacounts";
  import { homedata } from "../service/homeindex/type";
  let counts = reactive<homedata>(
      {
      houses:0,
      notAnswer: 0,
      notFinishedRepairs: 0,
      questions: 0,
      repairs: 0,
      stores: 0,
      todayQuestions: 0,
      todayRepairs: 0,
      users: 0
  }) ;
  //获取各类总数
  const getdata = async() => {
      let res = await getcounts() ;
      Object.assign(counts, res.data)
  };

  onMounted(() => {
      getdata()
  })
  </script>
  
  <style lang="less" scoped>
  @import url(../assets/home/homeDataCard.less);
  </style>
  